//后台配置/数据配置

import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Divider, Spin, Collapse, message, Tree, Button, DatePicker } from 'antd';

//引入字体图标组件
import { DragDropContext } from 'react-dnd';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import MyIcon from "../../components/common/MyIcon";

import request from '../../utils/request';
import PublicService from '../../services/PublicService';
import styles from './VideoDay.less';
import moment from 'moment'
// import Filtrate from '../../components/Filtrate';
import Dustbin from './component/Dustbin';
import Box from './component/Box';
const { TreeNode } = Tree;
const yuntai = require("../../assets/yuntai.png");
const jia = require("../../assets/jia.png");
const jian = require("../../assets/jian.png");
const yi = require("../../assets/yi.png")
const si = require("../../assets/si.png")
const jiu = require("../../assets/jiu.png")
const yi1 = require("../../assets/yi1.png")
const si1 = require("../../assets/si1.png")
const jiu1 = require("../../assets/jiu1.png")
const Panel = Collapse.Panel;
class VideoDay extends Component {
  state = {
    tunumber:1,
    treeData: [
      {
        children: [
          {
            children: [
              {
                children: [
                  {
                    pid: "#1燃气站",
                    title: "张三",
                    value: "张三"
                  },
                  {
                    pid: "#1燃气站",
                    title: "李四",
                    value: "李四"
                  }
                ],
                pid: "#1企业",
                title: "#1燃气站",
                value: "#1燃气站"
              },
              {
                children: [
                  {
                    pid: "#2燃气站",
                    title: "王五",
                    value: "王五"
                  },
                  {
                    pid: "#2燃气站",
                    title: "李四",
                    value: "李四"
                  }
                ],
                pid: "#1企业",
                title: "#2燃气站",
                value: "#2燃气站"
              }
            ],
            pid: "全部",
            title: "#1企业",
            value: "#1企业"
          },
          {
            children: [
              {
                children: [
                  {
                    pid: "#3燃气站",
                    title: "田七",
                    value: "田七"
                  },
                  {
                    pid: "#3燃气站",
                    title: "王九",
                    value: "王九"
                  }
                ],
                pid: "#2企业",
                title: "#3燃气站",
                value: "#3燃气站"
              }
            ],
            pid: "全部",
            title: "#2企业",
            value: "#2企业"
          }
        ],
        pid: "0",
        title: "全部",
        value: "全部"
      }
    ],
    width: '100%',
    num: 8,
    height: '40.5vh',
    video: '32.5vh',
    color: '#666',//文字颜色
    color1: '#3C97FF',//文字颜色
    color2: '#666',//文字颜色
    dustbins1: [
      { accepts: ['true'], open: false, controls: true },//type:GLASS,FOODP,APER
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
    ],
    dustbins: [
      { accepts: ['true'], open: false, controls: true, padding: '0 0.5vw 0 1vw', marginTop: '1vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 1vw 0 0.5vw', marginTop: '1vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 0.5vw 0 1vw', marginTop: '1.5vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 1vw 0 0.5vw', marginTop: '1.5vh' },
    ],
    videoList: true,
    boxes: [
      {
        title: '项目部',
        sub: [
          { name: '点位一', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '1' },
          { name: '点位二', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '2' },
          { name: '点位三', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '3' },
          { name: '点位四', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '4' },
          { name: '点位五', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '5' },
          { name: '点位六', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '6' }
        ],
      },
      {
        title: '项目现场',
        sub: [
          { name: '点位一', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '6' },
          { name: '点位二', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '7' },
          { name: '点位三', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '8' },
          { name: '点位四', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '9' },
          { name: '点位五', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '10' },
          { name: '点位六', type: 'true', url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', cameraCode: '11' }
        ],
      }

    ],
    droppedBoxNames: [],
    loading: false,
    options: [],
    request: null,
  };
  componentDidMount() {


    request({
      url: '/zhrq-web/gas/deliverystaff/getCamera',
      method: 'POST',
      data: {}
    }).then(data => {
      this.setState({
        treeData: data.ret.resultList
    })
    })







      let t = this;
      t.setState({
        loading: true,
      });
      t.onclick(1);
      let projectCompanyId = t.getQueryString('projectCompanyId');
      console.log("projectCompanyId:", projectCompanyId)
      request({
        url: '/jnhj/company/getAllCompanyName',
        method: 'GET'
      }).then(data => {
        if (data.rc === 0) {
          let options = [];
          data.ret.map(item => {
            options.push({ text: item.name, value: item.id })
          });
          t.setState({
            options,
            projectCompanyId
          });
          t.onSearch(projectCompanyId);
          t.timer();
        } else {
          message.error(data.err)
        }
      })
    }
  timer() {
        let t = this;
        t.state.request = setInterval(() => {
          let projectCompanyId = t.getQueryString('projectCompanyId');
          if (projectCompanyId !== t.state.projectCompanyId) {
            t.onSearch(projectCompanyId);
            t.setState({
              projectCompanyId,
            })
          }
        }, 1000)
      }
  componentWillUnmount() {
        clearInterval(this.state.request);
      }
  //获取url参数
  getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = location.href.substr(1).match(reg);
        if(r !== null) {
      return unescape(r[2]);
    }
    return null;
  }
  //分屏切换
  onclick(number) {
    let t = this;
    let splic = [...t.state.dustbins1].slice(0, number);
    this.setState({
      tunumber:number
    })
    if (number === 1) {

      splic[0].padding = '0 1vw 0 1vw',
        splic[0].marginTop = '1vh',
        this.setState({
          dustbins: splic,
          height: '83vh',
          video: '70vh',
          num: 24,
          color: '#3C97FF',
          color1: '#666',
          color2: '#666',
        })
    }
    if (number === 4) {
      splic[0].padding = '0 0.5vw 0 1vw', splic[0].marginTop = '1vh',
        splic[1].padding = '0 1vw 0 0.5vw', splic[1].marginTop = '1vh',
        splic[2].padding = '0 0.5vw 0 1vw', splic[2].marginTop = '1.5vh',
        splic[3].padding = '0 1vw 0 0.5vw', splic[3].marginTop = '1.5vh',
        this.setState({
          dustbins: splic,
          num: 12,
          height: '40.5vh',
          video: '33.5vh',
          color1: '#3C97FF',
          color: '#666',
          color2: '#666',
        })
    }
    if (number === 9) {
      splic[0].padding = '0 0.5vw 0 1vw', splic[0].marginTop = '1vh',
        splic[1].padding = '0 0.5vw 0 0.5vw', splic[1].marginTop = '1vh',
        splic[2].padding = '0 1vw 0 0.5vw', splic[2].marginTop = '1vh',
        splic[3].padding = '0 0.5vw 0 1vw', splic[3].marginTop = '1.5vh',
        splic[4].padding = '0 0.5vw 0 0.5vw', splic[4].marginTop = '1.5vh',
        splic[5].padding = '0 1vw 0 0.5vw', splic[5].marginTop = '1.5vh',
        splic[6].padding = '0 0.5vw 0 1vw', splic[6].marginTop = '1.5vh',
        splic[7].padding = '0 0.5vw 0 0.5vw', splic[7].marginTop = '1.5vh',
        splic[8].padding = '0 1vw 0 0.5vw', splic[8].marginTop = '1.5vh',
        this.setState({
          dustbins: splic,
          num: 8,
          height: '26.5vh',
          video: '20vh',
          color2: '#3C97FF',
          color: '#666',
          color1: '#666',
        })
    }
  }
  //鼠标松开事件
  /**
   *  参数(@index 容器的下标  @item 拖动的name  @box 携带播放所需的信息)
   **/
  handleDrop(index, item, box) {
    let t = this;
    /*
    * 此处t.setState执行两个参数，t.setState(update(this.state,{}),()=>{})
    * 第一个参数用于关闭播放器
    * 第二个参数用于开启播放器并更新播放的相关信息
    * update 扩展不变的数据（immutability-helper） 可参考github地址:https://github.com/kolodny/immutability-helper
    * {$set: any} 直接赋值覆盖
    * {$push: array} 数组中的push()语法
    * */
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open: {
              $set: false,
            }
          },
        }
      }),
      () => {
        const { name } = item;
        let params = {};
        for (let i = 0; i < box.length; i++) {
          box[i].sub.map(item => {
            if (item.name === name) {
              params.cameraCode = item.url
            }
          })
        };
        request({
          url: '/jnhj/visCamera/getVideoUrlByCode',
          method: 'GET',
          params
        }).then(data => {
          if (data.rc === 0) {
            let playUrl = data.ret;
            const droppedBoxNames = name ? { $push: [name] } : {};
            this.setState(
              update(this.state, {
                dustbins: {
                  [index]: {
                    lastDroppedItem: {
                      $set: playUrl,
                    },
                    name: {
                      $set: name,
                    },
                    open: {
                      $set: true,
                    }
                  },
                },
                droppedBoxNames,
              }),
            )
          } else {
            message.error(data.err)
          }
        });
      }
    )
  }
  isDropped(boxName) {
    return this.state.droppedBoxNames.indexOf(boxName) > -1;
  }

  //查询
  onSearch(proId) {
    let t = this;
    t.f1.getForm().validateFields((err, value) => {
      if (!err) {
        t.setState({
          loading: true,
        });
        request({
          method: 'GET',
          url: '/jnhj/visCamera/getVisListByBindObjId',
          params: {
            projectCompanyId: proId ? proId.projectCompanyId : value.projectCompanyId,
          }
        }).then(data => {
          if (data.rc === 0) {
            if (data.ret.length > 0) {
              let boxes = [];
              let name = [];
              data.ret.map((item, index) => {
                let title = item.name;
                let sub = [];
                item.cameraList.map((items, index) => {
                  name.push(items.cameraName);
                  sub.push({ name: items.cameraName, type: 'true', url: items.cameraCode })
                });
                boxes.push({ title, sub })
              });
              for (let i = 0; i < 1; i++) {
                this.handleDrop(i, { name: name[i] }, boxes);
              }
              t.setState({
                boxes,
                loading: false,
                videoList: true
              })
            } else {
              t.setState({
                videoList: false
              })
            }

          } else {
            message.error(data.err)
          }
        })
      }
    })
  };
  onClose(index) {
    let t = this;
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open: {
              $set: false,
            },
            name: {
              $set: '',
            },
          },
        }
      })
    )
  }

  //树形控件

  renderTreeNodes = data => data.map((item) => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} />;
  })

  render() {
    let t = this;
    const { boxes, dustbins, color, color1, color2, options, videoList, projectCompanyId,treeData } = t.state;
    const items = [
      {
        type: 'select',
        label: '项目选取',
        paramName: 'projectCompanyId',
        options: options,
        initialValue: projectCompanyId ? projectCompanyId : '',
        style: true,
      }
    ];

    return (
      <div>
        {/* <Filtrate items={items} ref={ref=>t.f1=ref} 
              submit={t.onSearch.bind(t)} 
              clearBtn={'hide'}/> */}
        <Row gutter={12} style={{ clear: 'both'}}>
          <Col xs={18} sm={18} md={18} lg={18} xl={18} style={{margin:"1vh 0px 0px 0px"}}>
            <div className={styles['wp-video']} style={{ clear: 'both' }}>
              <Row style={{ marginTop: '1vh' }}>
                <Col span={6}>
                  <div className={styles.blueBlock}><i></i><span>视频管理 >> 实时视频</span></div>
                </Col>
                {/* <Col span={18} style={{ textAlign: 'right', paddingRight: '1vw' }}>
                  <span
                    onClick={t.onclick.bind(t, 1)}
                    style={{ color, cursor: 'pointer' }}><MyIcon type="icon-icon-screen-one" style={{ paddingRight: '0.4vw', color, fontSize: '0.8vw' }} />一分屏</span>
                  <Divider type="vertical" />
                  <span
                    onClick={t.onclick.bind(t, 4)}
                    style={{ color: color1, cursor: 'pointer' }}><MyIcon type="icon-sifenping" style={{ paddingRight: '0.4vw', color: color1, fontSize: '0.8vw' }} />四分屏</span>
                  <Divider type="vertical" />
                  <span
                    onClick={t.onclick.bind(t, 9)}
                    style={{ color: color2, cursor: 'pointer' }}><MyIcon type="icon-icon-screen-nine" style={{ paddingRight: '0.4vw', color: color2, fontSize: '0.8vw' }} />九分屏</span>
                </Col> */}
              </Row>
              <Row >
                {
                  dustbins.map(({ accepts, lastDroppedItem, name, padding, marginTop, open, controls, }, index) => (
                    <Col key={index} md={t.state.num} lg={t.state.num} xl={t.state.num}>
                      <Dustbin
                        key={index}
                        onClose={t.onClose.bind(t, index)}
                        load={t.state.load}
                        name={name}
                        padding={padding}
                        controls={controls}
                        open={open}
                        accepts={accepts}
                        lastDroppedItem={lastDroppedItem}
                        marginTop={marginTop}
                        width={t.state.width}
                        height={t.state.height}
                        video={t.state.video}
                        onDrop={item => this.handleDrop(index, item, t.state.boxes)}
                      />
                    </Col>
                  ))
                }
              </Row>
            </div>
          </Col>
          <Col xs={6} sm={6} md={6} lg={6} xl={6} style={{margin:"1vh 0px 0px 0px"}}>
            <div className={styles['wp-video']}>
              <div className={styles.blueBlock} style={{ paddingTop: '10px' }}><i style={{ height: 14, width: 5, backgroundColor: "#3C8FFF", marginRight: 20 }}></i><span style={{ textAlign: "left", fontWeight: 'normal', margin: "0 10px", borderBottom: "1px solid #ccc", paddingBottom: 10 }}> 云台控制</span></div>
              {
                !videoList &&
                <Row>
                  <div style={{ height: '60vh', overflow: 'auto', marginTop: '10px', lineHeight: '60vh', textAlign: 'center' }}>
                    暂无视频
                        </div>
                </Row>
              }
              {
                videoList &&
                <Row>
                  <div style={{ height: '82vh', overflow: 'auto' }}>
                    {/* <Collapse defaultActiveKey={['1']} bordered={false} accordion >
                            <Panel header="项目部" key="1" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                              {
                                boxes[0].sub.map(({ name, type, url }, index) => (
                                  <Box
                                    key={index}
                                    name={name}
                                    type={type}
                                    isDropped={this.isDropped(type)}
                                  />
                                ))
                              }
                            </Panel>
                            <Panel header="项目现场" key="2" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                              {
                                boxes[1].sub.map(({ name, type, url }, index) => (
                                  <Box
                                    key={index}
                                    name={name}
                                    type={type}
                                    isDropped={this.isDropped(type)}
                                  />
                                ))
                              }
                            </Panel>
                           
                          </Collapse> */}

                    <Col style={{ textAlign: "center" }} span={24}>
                    <Col style={{ textAlign: "center" }} span={12}> <img src={yuntai} style={{ cursor: "pointer" ,width:100,marginTop:20}} /></Col>
                    <Col span={12} style={{lineHeight:"30px",marginTop:"20px"}}>
                    <Col style={{ textAlign: "right" }} span={8}><img src={jia} style={{ cursor: "pointer" }} /></Col>
                    <Col style={{ textAlign: "center", color: "#1C2B36" }} span={8}><span style={{ cursor: "pointer" }}>焦距</span></Col>
                    <Col style={{ textAlign: "left" }} span={8}><img src={jian} style={{ cursor: "pointer" }} /></Col>

                     <Col style={{ textAlign: "right" }} span={8}><img src={jia} style={{ cursor: "pointer" }} /></Col>
                    <Col style={{ textAlign: "center", color: "#1C2B36" }} span={8}><span style={{ cursor: "pointer" }}>光圈</span></Col>
                    <Col style={{ textAlign: "left" }} span={8}><img src={jian} style={{ cursor: "pointer" }} /></Col>

                      <Col style={{ textAlign: "right" }} span={8}><img src={jia} style={{ cursor: "pointer" }} /></Col>
                    <Col style={{ textAlign: "center", color: "#1C2B36" }} span={8}><span style={{ cursor: "pointer" }}>焦点</span></Col>
                    <Col style={{ textAlign: "left" }} span={8}><img src={jian} style={{ cursor: "pointer" }} /></Col>

                    </Col>
                   
                    
                    </Col>
                   
                    <Col span={24}><br/></Col>
                    <Col span={24}></Col>
                   
                    <Col span={24}></Col>
                    <Col span={24}></Col>
                  
                    <Col span={24}>
                    <Col span={10} style={{ textAlign: "center" }}>分屏模式 : </Col> 
                    <Col style={{ textAlign: "left" }} span={4}><img src={this.state.tunumber == 1?yi1:yi} style={{ cursor: "pointer" }} onClick={t.onclick.bind(t, 1)} /></Col>
                    <Col style={{ textAlign: "center" }} span={4}><img src={this.state.tunumber == 4?si1:si} style={{ cursor: "pointer" }} onClick={t.onclick.bind(t, 4)} /></Col>
                    <Col style={{ textAlign: "right" }} span={4}><img src={this.state.tunumber == 9?jiu1:jiu} style={{ cursor: "pointer" }} onClick={t.onclick.bind(t, 9)} /></Col>
                    </Col>
 
                   
                    <br />  <br />  <br />
                    <Col span={24}><br /> </Col>
                    <div className={styles.blueBlock} style={{ paddingTop: '10px' }}><i style={{ height: 14, width: 5, backgroundColor: "#3C8FFF", marginRight: 20 }}></i><span style={{ textAlign: "left", fontWeight: 'normal', margin: "0 10px", borderBottom: "1px solid #ccc", paddingBottom: 10 }}> 视频列表</span></div>

                    <Col span={24} style={{height:"48vh",overflowY:"auto"}}>

                      <Tree
                                checkable
                                defaultExpandedKeys={["0-0"]}
                                onCheck={this.onCheck}
                                // autoExpandParent={true}
                            >
                                {this.renderTreeNodes(treeData)}
                            </Tree>
                    </Col>
                    
                   

                  </div>
                </Row>
              }
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
  };
}
export default connect(mapStateToProps)(DragDropContext(HTML5Backend)(VideoDay));